<div class="application-dashboard-header-left">
    <nz-select [(ngModel)]="eurekaCode" style="width: 10em" nzPlaceHolder="请选择Eureka实例"
        required [disabled]="this.eurekaCodeIsReady">
        <nz-option *ngFor="let eureka of eurekaList" [nzValue]="eureka.code" [nzLabel]="eureka.code"></nz-option>
    </nz-select>
    <button nz-button [nzType]="this.eurekaCodeIsReady ? 'danger' : 'primary'" (click)="toggleEurekaCodeIsReady()" style="margin-left: 1em;">
        {{this.eurekaCodeIsReady ? '解锁' : '锁定'}}
    </button>
</div>
<div class="application-dashboard-header-right">
    <input style="width: 10em;" nz-input placeholder="app name filter" #applicationNameSearchParamInput
        [(ngModel)]="applicationNameSearchParam"
        (keyup)="applicationNameSearchParamChangeHandler(applicationNameSearchParamInput.value)"
        [disabled]="!eurekaCodeIsReady" />
    <label style="margin-left: 1em;">自动刷新&nbsp;
        <nz-switch [(ngModel)]="autoRefresh"
            (ngModelChange)="autoRefreshChangeHandler($event)"
            [disabled]="!eurekaCodeIsReady">
        </nz-switch>
    </label>
    <button nz-button nzType="primary" [nzLoading]="loading" (click)="loadData()" [disabled]="autoRefresh || !eurekaCodeIsReady"
        style="margin-left: 1em;">
        刷新
    </button>
</div>
<div class="eureka-app-container" *ngIf="eurekaCodeIsReady">
    <div *ngFor="let rowData of eurekaApplicationsGroup" class="data-row" nz-row nzGutter="8">
        <div *ngFor="let eurekaApplication of rowData" nz-col nzSpan="8">
            <nz-card nzTitle="{{eurekaApplication.name}}">
                <div class="data-card-body">
                    <div nz-row class="eureka-instance-line" *ngFor="let eurekaInstance of eurekaApplication.instance">
                        <span nz-col nzSpan="3">
                            <nz-tag nzColor="{{eurekaInstance.color}}">{{eurekaInstance.status.substr(0, 3)}}</nz-tag>
                        </span>
                        <span nz-col nzSpan="18" style="word-break: break-all;">{{eurekaInstance.instanceId}}</span>
                        <span nz-col nzSpan="3">
                            <a nz-dropdown [nzDropdownMenu]="menu">
                                操作
                                <em nz-icon nzType="down" nzTheme="outline"></em>
                            </a>
                        </span>

                        <nz-dropdown-menu #menu="nzDropdownMenu">
                            <ul nz-menu nzSelectable>
                                <li nz-menu-item>
                                    <button nz-button nzType="default" nzSize="small"
                                        (click)="openInstanceDetail(eurekaInstance, instanceDetailContentTemplate)">
                                        详情
                                    </button>
                                </li>
                                <li nz-menu-item>
                                    <a target="_blank"
                                        style="text-align: center; color: skyblue;text-decoration:underline"
                                        href="{{(!!eurekaInstance.statusPageUrl && eurekaInstance.statusPageUrl.length > 5) ? eurekaInstance.statusPageUrl.substr(0, eurekaInstance.statusPageUrl.length - 5) : '#'}}">
                                        act
                                    </a>
                                </li>
                                <li nz-menu-item>
                                    <button nz-button nzSize="small" nzType="primary" nzGhost
                                        [disabled]="eurekaInstance.status === 'UP'" nz-popconfirm
                                        nzPopconfirmTitle="确认?"
                                        (nzOnConfirm)="putStatusUp(eurekaInstance.app, eurekaInstance.instanceId)">
                                        上线
                                    </button>
                                </li>
                                <li nz-menu-item>
                                    <button nz-button nzType="danger" nzSize="small" nzGhost
                                        [disabled]="eurekaInstance.status === 'OUT_OF_SERVICE'" nz-popconfirm
                                        nzPopconfirmTitle="确认?"
                                        (nzOnConfirm)="putStatusOutOfService(eurekaInstance.app, eurekaInstance.instanceId)">
                                        下线
                                    </button>
                                </li>
                            </ul>
                        </nz-dropdown-menu>
                    </div>
                </div>
            </nz-card>
        </div>
    </div>
</div>

<ng-template #instanceDetailContentTemplate>
    <pre>{{currentShowInstanceJson}}</pre>
</ng-template>